/* eslint-disable */
/**
 * Created by GYL on 2018/8/24
 */
//项目班子搭建-变更人员
import React, { Component } from 'react';
import styles from './index.less';
import { Icon,Input, message, Tree, Spin, Empty, Breadcrumb, Alert } from 'antd';
import request from '../../../utils/request';
const { Search } = Input;
const { TreeNode } = Tree;
const IconFont = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1315525_f8lqdqjh676.js',
});

class Alter_Wrap extends Component {
    state = {
        treeData2: [],
        treeData: [],
        add: false,
        delete: false,
        replace: false,
        selectedNodes: '',
        checkedKeys2: [],
        spinLeft: true,
        spinRight: false,
        Allspinning: false
    };

    componentDidMount() {
        this.getAllRoleAndUser()
    }

    //查询角色
    getAllRoleAndUser = () => {
        this.setState({
            spinLeft: true
        })
        request({
            url: '/pm-web/projectmanage/projectinfo/getAllRoleAndUser',
            method: 'POST',
            data: { projectId: this.props.projectId }
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    treeData: data.ret.treeList,
                    spinLeft: false
                })
            }
        })
    }
    //获取人员信息和按钮状态
    getTreeAndButtonType = (id) => {
        this.setState({
            spinRight: true
        })
        request({
            url: '/pm-web/projectmanage/projectinfo/getTreeAndButtonType',
            method: 'POST',
            data: { projectId: this.props.projectId, id }
        }).then(data => {
            // console.log(data)
            if (data.rc === 0) {
                this.setState({
                    treeData2: data.ret.userTree,
                    add: data.ret.add,
                    delete: data.ret.delete,
                    replace: data.ret.replace,
                    spinRight: false
                })
            }
        })
    }


    onExpand = expandedKeys => {
        // console.log('onExpand', expandedKeys);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.setState({
            expandedKeys,
            autoExpandParent: false,
        });
    };

    onCheck = checkedKeys => {
        // console.log('onCheck', checkedKeys);
        this.setState({ checkedKeys });



    };



    onSelect = (selectedKeys, e) => {
        // console.log('onSelect', e.selectedNodes[0].key);
        this.setState({
            selectedKeys,
            selectedNodes: e.selectedNodes[0]?e.selectedNodes[0].key:[]
        });
        if(e.selectedNodes[0]){
        //获取人员信息和按钮状态
        this.getTreeAndButtonType(e.selectedNodes[0].key)
        }

    };
    //删除
    onDelete = () => {
        if (!this.state.delete) {
            return
        }

        this.setState({
            spinRight: true,
            spinLeft: true
        })
        request({
            url: '/pm-web/projectmanage/projectinfo/deleteUserByPersonnelChange',
            method: 'POST',
            data: { projectId: this.props.projectId, id: this.state.selectedNodes }
        }).then(data => {
            if (data.rc === 0) {
                message.success('删除成功')
                this.getAllRoleAndUser()
            } else {
                message.warning(`${data.err}`)
            }

            this.setState({
                spinRight: false,
                spinLeft: false
            })
        })
    }


    //新增
    onAdd = () => {
        if (!this.state.add) {
            return
        }
        this.setState({
            spinRight: true,
            spinLeft: true
        })
        request({
            url: '/pm-web/projectmanage/projectinfo/addUserByPersonnelChange',
            method: 'POST',
            data: { projectId: this.props.projectId, id: this.state.selectedNodes, userIdList: this.state.checkedKeys2 }
        }).then(data => {
            if (data.rc === 0) {
                message.success('新增成功')
                this.getAllRoleAndUser()
            } else {
                message.warning(`${data.err}`)
            }
            this.setState({
                spinRight: false,
                spinLeft: false
            })
        })
    }

    //替换
    onReplace = () => {
        if (!this.state.replace) {
            return
        }
        console.log(this.state.checkedKeys2)
        if (this.state.checkedKeys2.length != 1) {
            message.warning('只能单一替换人员,请重新选择人员')
            return
        }

        this.setState({
            spinRight: true,
            spinLeft: true
        })


        request({
            url: '/pm-web/projectmanage/projectinfo/replaceUserByPersonnelChange',
            method: 'POST',
            data: { projectId: this.props.projectId, id: this.state.selectedNodes, replaceUserId: this.state.checkedKeys2[0] }
        }).then(data => {
            if (data.rc === 0) {
                message.success('替换成功')
                this.getAllRoleAndUser()
            } else {
                message.warning(`${data.err}`)
            }

            this.setState({
                spinRight: false,
                spinLeft: false
            })
        })
    }


    onExpand2 = expandedKeys2 => {
        // console.log('onExpand', expandedKeys2);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.setState({
            expandedKeys2,
            autoExpandParent2: false,
        });
    };

    onCheck2 = checkedKeys2 => {
        console.log('onCheck', checkedKeys2);
        this.setState({ checkedKeys2 :checkedKeys2.checked});
    };

    onSelect2 = (selectedKeys, info) => {
        // console.log('onSelect', info);
        this.setState({ selectedKeys2: selectedKeys });
    };

    renderTreeNodes = data =>
        data.map(item => {
            if (item.children) {
                return (
                    <TreeNode  disableCheckbox={true} title={item.title} key={item.key} icon={<Icon type={item.icon} theme={item.theme} twoToneColor={item.twoToneColor} />} selectable={item.selectable}>
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode {...item} icon={<Icon type={item.icon} theme={item.theme} twoToneColor={item.twoToneColor} selectable={item.selectable} />} />;
        });


    onBack = () => {
        this.props.onBack()
    }

    onSearch = (val) => {
        // console.log(val)
        this.setState({
            spinRight: true
        })
        request({
            url: '/pm-web/projectmanage/baseuser/getUserTree',
            method: 'POST',
            data: { vagueName: val }
        }).then(data => {
            this.setState({
                treeData2: data.ret,
                spinRight: false
            })
        })
    }



    render() {
        let t = this
        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '76vh';
        let tableHeight = 310;
        if (width > 1367) {
            tableHeight = 380;
            containerHeight = '83vh';
        }

        return (

            <div style={{ marginBottom: 0, marginTop: 0, height: '90vh', backgroundColor: '#F6FCFC', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", borderRadius: 3 }} className={styles.addWrap}>
                <div style={{ height: '30px', display: 'flex', alignItems: 'center', flexDirection: 'row', borderRadius: 3, border: '2px solid #fff', paddingLeft: 15 }}>
                    <Breadcrumb>
                        <Breadcrumb.Item >
                            <IconFont type="icon-moban" style={{ color: '#28a4b9' }} />
                            <span>项目班子搭建</span>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <IconFont type="icon-zhuluxiangmubiangeng" style={{ color: 'rgb(109, 103, 229)' }} />
                            <span>变更人员</span>
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <Alert
                    message="人员变更只对未完成事件有效!"
                    banner
                    closable
                />
                <div className={styles.warpBox} style={{ height: '90vh', backgroundColor: '#F6FCFC', overflow: 'auto' }}>

                    <div style={{ flex: 1, backgroundColor: '#f6f6f18a', overflow: 'auto', display: 'flex' }}>

                        <div style={{ flex: 4, display: 'flex', alignItems: 'center', flexDirection: 'column', overflow: 'auto', height: '80vh' }}>

                            <div style={{ fontSize: 14, fontWeight: 700, textAlign: 'center', width: '100%', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", borderRadius: 3, backgroundColor: '#fff', marginTop: 3 }}>角色配置</div>
                            <div style={{ flex: 1, overflow: 'auto', maxHeight: '90vh', borderRadius: 3, backgroundColor: '#fff', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", margin: 3, width: '100%' }}>
                                <Spin size='lager' spinning={this.state.spinLeft}>
                                    {
                                        this.state.treeData.length > 0 ?
                                            <Tree
                                                showIcon
                                                defaultExpandAll={true}
                                                onExpand={this.onExpand}
                                                expandedKeys={this.state.expandedKeys}
                                                autoExpandParent={this.state.autoExpandParent}
                                                onCheck={this.onCheck}
                                                checkedKeys={this.state.checkedKeys}
                                                onSelect={this.onSelect}
                                                selectedKeys={this.state.selectedKeys}
                                            // checkStrictly={true}
                                            >
                                                {this.renderTreeNodes(this.state.treeData)}
                                            </Tree> : <Empty />
                                    }

                                </Spin>
                            </div>
                            <Spin spinning={this.state.spinRight} >
                                <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', height: 50, width: '100%' }}>


                                    <div style={{ color: '#fff', width: 136, height: 32, background: this.state.delete ? 'red' : '#ccc', borderRadius: 14, textAlign: 'center', lineHeight: '32px', cursor: 'pointer', margin: '0px 10px' }} onClick={this.onDelete}>删除</div>
                                    <div style={{ color: 'red', width: 136, height: 32, background: '#fff', borderRadius: 14, textAlign: 'center', lineHeight: '32px', border: '1px solid #ccc', cursor: 'pointer', margin: '0px 10px' }} onClick={this.onBack}>关闭</div>
                                </div>
                            </Spin>

                        </div>

                        <div style={{ width: 15, display: 'flex', alignItems: 'center', flexDirection: 'column', backgroundColor: '#f7f5f5', justifyContent: 'space-around' }}>

                        </div>


                        <div style={{ flex: 4, display: 'flex', alignItems: 'center', flexDirection: 'column', overflow: 'auto', height: '80vh' }}>
                            <div style={{ fontSize: 14, fontWeight: 700, textAlign: 'center', width: '100%', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", borderRadius: 3, backgroundColor: '#fff', marginTop: 3 }}>人员选取</div>
                            <div style={{ flex: 1, overflow: 'auto', maxHeight: '90vh', borderRadius: 3, backgroundColor: '#fff', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", margin: 3, width: '100%' }}>
                                <Spin tip="Loading..." spinning={this.state.spinRight}>
                                    <Search placeholder="关键词" onSearch={this.onSearch} enterButton style={{ padding: 5 }} />
                                    {
                                        this.state.treeData2.length > 0 ?

                                            <Tree
                                                showIcon
                                                checkable
                                                onExpand={this.onExpand2}
                                                expandedKeys={this.state.expandedKeys2}
                                                autoExpandParent={this.state.autoExpandParent2}
                                                onCheck={this.onCheck2}
                                                checkedKeys={this.state.checkedKeys2}
                                                onSelect={this.onSelect2}
                                                selectedKeys={this.state.selectedKeys2}
                                                checkStrictly={true}
                                            >
                                                {this.renderTreeNodes(this.state.treeData2)}
                                            </Tree> : <Empty />
                                    }
                                </Spin>

                            </div>
                            <Spin spinning={this.state.spinRight} >
                                <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', height: 50, width: '100%' }}>
                                    <div style={{ color: '#fff', width: 136, height: 32, background: this.state.add ? 'rgba(0,171,187,1)' : '#ccc', borderRadius: 14, textAlign: 'center', lineHeight: '32px', cursor: 'pointer', margin: '0px 10px' }} onClick={this.onAdd}>新增</div>
                                    <div style={{ color: '#fff', width: 136, height: 32, backgroundColor: this.state.replace ? 'rgb(18, 173, 235)' : '#ccc', borderRadius: 14, textAlign: 'center', lineHeight: '32px', border: '1px solid #ccc', cursor: 'pointer', margin: '0px 10px' }} onClick={this.onReplace}>替换</div>

                                </div>
                            </Spin>
                        </div>


                    </div>
                </div>

            </div>

        );


    }
}
export default Alter_Wrap;

